<!-- 登录 -->
<template>
  <div class="login">
    <van-nav-bar title="登录" safe-area-inset-top>
    </van-nav-bar>

    <div class="form">
      <van-form ref="form"  >
        <van-field center v-model="form.phone" name="手机号" type="tel"   autocomplete="off" maxlength="11" placeholder="请输入手机号" :rules="[
          { required: true, message: '' },
          {
            validator: (value) => {
              return /^1[3-9]\d{9}$/.test(value);
            },
            message: '请输入正确格式的手机号',
          },
        ]">
          <template #left-icon>
            <div class="icon">
              <img src="../../assets/images/user/手机 (1).png" alt="" />
            </div>
          </template>
        </van-field>
        <van-field center v-if="swit" v-model="form.password" :type="type" name="密码" autocomplete="off" placeholder="请输入密码"
          :rules="[{ required: true, message: '' }]">
          <template #left-icon>
            <div class="icon">
              <img src="../../assets/images/user/密码.png" alt="" />
            </div>
          </template>
          <template #right-icon>
            <van-icon v-if="type == 'password'" name="closed-eye" @click="click1()" />
            <van-icon v-else name="eye-o" @click="click1()" />
          </template>
        </van-field>
        <van-field v-else v-model="form.code" type="number" name="验证码" autocomplete="off"  placeholder="请输入验证码"
          :rules="[{ required: true, message: '' }]">
          <template #left-icon>
            <div class="icon">
              <img src="../../assets/images/user/验证码.png" alt="" />
            </div>
          </template>
          <template #button>
            <van-button plain native-type="button" size="small" type="info" :disabled="disabled" round @click="getCode">
              {{ codeMsg }}</van-button>
          </template>
        </van-field>
        <div class="yanzhengma">
          <span @click="swth">验证码登录</span>
          <span @click="() => $router.push({ path: '/forgot-password' })">忘记密码?</span>
        </div>
      </van-form>
    </div>
    <div class="reg" @click="() => $router.push({ path: '/register' })">
      注册
    </div>
    <div class="bottom">
      <van-button round block type="info" @click="onSubmit"
        color="linear-gradient(to right, rgb(120, 184, 246), rgb(29,97,214))" style="font-size: 20px">登 录</van-button>
      <!-- <div class="xieyi">
        <van-checkbox v-model="checked" checked-color="rgb(229,124,110)"
          >我已阅读并同意 <span>&lt;&lt;用户协议&gt;&gt;</span>
        </van-checkbox>
      </div> -->

      <!-- <div class="disanfang">
        <van-divider>第三方账号登录</van-divider>
        <div>
          <img src="../../assets/images/user/微信.png" alt="" />
          <img src="../../assets/images/user/QQ (1).png" alt="" />
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import Bus from '../../utils/bus.js'
import { codeLogin, login, getCode } from "../../api/index";
export default {
  name: "",
  data() {
    return {
      swit: true,
      checked: false,
      disabled: false,
      codeNum: null,
      codeMsg: "获取验证码",
      form: {
        code: "",
        phone: "",
        password: "",
      },
      type: 'password'
    };
  },
  methods: {
    // 获取验证码
    getCode() {
      this.$refs.form
        .validate("手机号")
        .then(async () => {
          // 验证通过
          console.log("通过");

          let res = await getCode({ phone: this.form.phone });
          if (res.status == 200) {
            // 禁用按钮
            this.disabled = true;
            this.codeNum = 60;
            // 倒计时
            let timer = setInterval(() => {
              if (this.codeNum == 0) {
                clearInterval(timer);
                this.disabled = false;
                this.codeMsg = "获取验证码";
              } else {
                --this.codeNum;
                this.codeMsg = `重新获取(${this.codeNum})`;
              }
            }, 1000);
          }

        })
        .catch(() => {
          // 验证不通过
        });
    },
    onSubmit() {
      this.$refs.form
        .validate()
        .then(async (res1) => {
          // 表单验证通过


          console.log("swit", this.swit);
          var res;
          if (this.swit) {
            res = await login(this.form);
          } else {
            res = await codeLogin(this.form);
          }

          if (res.status == 200) {
            localStorage.setItem("userid", res.data.userid);
            Bus.$emit('val', "success")
            this.$router.replace({ path: '/home', query: {} });

          }

          console.log(res);
        })
        .catch((err) => {
          // 表单验证不通过
          console.log("cuole", err);
        });
    },
    // 验证码登录
    swth() {
      this.swit = !this.swit;
    },
    click1() {
      this.type == 'password' ? this.type = 'text' : this.type = 'password'
    },
  },
  computed: {},
  watch: {},
  created() { },
  mounted() { },
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  position: relative;

  .form {
    width: 90%;
    border: 1px solid #eee;
    margin: 50px auto;
    box-shadow: 0 0 10px rgb(223, 237, 248);
    border-radius: 15px;

    .yanzhengma {
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: rgb(99, 157, 246);
      padding: 0 30px;
      margin-bottom: 50px;
    }

    .icon {
      width: 100px;
      text-align: center;
      border-right: 1px solid #daf2fd;
      margin-right: 20px;

      img {
        width: 50px;
        height: 50px;
      }
    }
  }

  .reg {
    width: 90%;
    text-align: right;
    color: rgb(113, 113, 113);
  }

  .bottom {
    margin: 16px;
    width: 90%;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: absolute;
    bottom: 5%;
    left: 2.5%;

    .xieyi {
      width: 90%;
      display: flex;
      justify-content: center;
      margin-top: 50px;

      span {
        color: rgb(229, 124, 110);
      }
    }

    .disanfang> :last-child {
      display: flex;
      justify-content: space-around;
      align-items: center;

      img {
        width: 100px;
        height: 100px;
      }
    }
  }
}
</style>